import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { RoutingContext, match } from 'react-router';
import { Provider } from 'react-redux';
import { StaticRouter } from "react-router-dom";
import createStoreConfig from './createStore';
import { ServerRouter } from './views/ServerRouter';

const app = express();

function renderFullPage(html, initialState) {
  return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="renderer" content="webkit">
      <meta name="keywords" content="SOFA_在线文档_了解学习更多产品使用帮助！">
      <link rel="manifest" href="http://localhost:3030/manifest.json">
      <link rel="shortcut icon" href="http://localhost:3030/favicon.ico">
      <title>SOFA_在线文档_了解学习更多产品使用帮助</title>
    </head>
    <body>
      <div id="root">
        ${html}
      </div>
      <script>
        window.initState = ${JSON.stringify(initialState)};
      </script>
      <script src="http://localhost:3030/static/js/bundle.js"></script>
    </body>
    </html>
  `;
}

app.use((req, res) => {
  const store = createStoreConfig();
  const state = store.getState();

  // Promise.all([
  //   store.dispatch(fetchList()),
  //   store.dispatch(fetchItem(renderProps.params.id))
  // ])
  // .then(() => {
    const html = renderToString(
      <Provider store={store}><ServerRouter url={req.url} /></Provider>
    );
    res.end(renderFullPage(html, store.getState()));
  // });
});